﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ScollItemMaster.aspx.cs"
    Inherits="ScollItemMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .Grid td
        {
            background-color: #A1DCF2;
            color: black;
            font-size: 10pt;
            font-family: Arial;
            line-height: 200%;
            cursor: pointer;
            width: 100px;
        }
        .Grid th
        {
            background-color: #3AC0F2;
            color: White;
            font-family: Arial;
            font-size: 10pt;
            line-height: 200%;
            width: 100px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Label ID="lblrowcount" runat="server"></asp:Label>
    <table class="Grid" cellspacing="0" rules="all" id="Table1" style="width: 100%; border-collapse: collapse;">
        <tr><th scope="col" style="width:39%;">Item Name</th><th scope="col">Item Code</th><th scope="col">Item AddDesc</th><th scope="col">Alt ItemCode</th></tr>
    </table>
    <div id="dvGrid" style="height: 500px; overflow: auto; width: 100%;">
        <asp:GridView ID="gvITEMS" runat="server" AutoGenerateColumns="false" CssClass="Grid" Width="100%">
            <Columns>                
                <asp:BoundField DataField="ITMDESC" HeaderText="ITEM NAME" ItemStyle-CssClass="name"
                    ItemStyle-Width="200" HeaderStyle-Width="200" />
                <asp:BoundField DataField="ITMCODE" HeaderText="ITEM CODE" ItemStyle-CssClass="city"
                    ItemStyle-Width="100" HeaderStyle-Width="100" />
                <asp:BoundField DataField="ITMADDDESC" HeaderText="ITEMADDL DESC" ItemStyle-CssClass="country"
                    ItemStyle-Width="100" HeaderStyle-Width="100" />
                <asp:BoundField DataField="ITMALTDESC" HeaderText="ALT ITEMCODE" ItemStyle-CssClass="postal"
                    ItemStyle-Width="100" HeaderStyle-Width="100" />
            </Columns>
        </asp:GridView>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        var pageIndex = 1;
        var pageCount;
        $(function () {
            //Remove the original GridView header
            $("[id$=gvITEMS] tr").eq(0).remove();
        });

        //Load GridView Rows when DIV is scrolled
        $("#dvGrid").on("scroll", function (e) {
            var $o = $(e.currentTarget);
            if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
                GetRecords();
            }
        });

        //Function to make AJAX call to the Web Method
        function GetRecords() {
            pageIndex++;
            if (pageIndex == 2 || pageIndex <= pageCount) {

                //Show Loader
                if ($("[id$=gvITEMS] .loader").length == 0) {
                    var row = $("[id$=gvITEMS] tr").eq(0).clone(true);
                    row.addClass("loader");
                    row.children().remove();
                    row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" src="103.gif"  /></td>');
                    $("[id$=gvITEMS]").append(row);
                }
                $.ajax({
                    type: "POST",
                    url: "ScollItemMaster.aspx/GetCustomers",
                    data: '{pageIndex: ' + pageIndex + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            }
        }

        //Function to recieve XML response append rows to GridView
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
            var customers = xml.find("Customers");
            $("[id$=gvITEMS] .loader").remove();
            customers.each(function () {
                var customer = $(this);
                var row = $("[id$=gvITEMS] tr").eq(0).clone(true);
                $(".name", row).html(customer.find("ITMDESC").text());
                $(".city", row).html(customer.find("ITMCODE").text());
                $(".postal", row).html(customer.find("ITMADDDESC").text());
                $(".country", row).html(customer.find("ITMALTDESC").text());
                $("[id$=gvITEMS]").append(row);
                //$("#lblrowcount").innerHTML = row;
            });            
            //Hide Loader
            $("#loader").hide();
        }
    </script>
    </form>
</body>
</html>
